<template>
  <div>
    <!-- 物流检测 2018年3月13日18:05:49 zhangQ -->
    <Row>
      <Form label-position="right" :label-width="60" inline>
        <FormItem label="起始站：">
          <Select v-model="tabParam.startStationCode" filterable placeholder="请输入起始站" remote clearable
            :remote-method="loadStartStationListData" :loading="queryForm.startStationloading">
            <template v-for="item in queryForm.startStationList">
              <Option :value="item.stationCode" :key="item.stationCode">{{ item.stationName }}</Option>
            </template>
          </Select>
        </FormItem>

        <FormItem label="终点站：">
          <Select v-model="tabParam.endStationCode" filterable placeholder="请输入终点站" remote clearable
            :remote-method="loadEndStationListData" :loading="queryForm.endStationloading">
            <template v-for="item in queryForm.endStationList">
              <Option :value="item.stationCode" :key="item.stationCode">{{ item.stationName }}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="时间段：">
          <RadioGroup v-model="tabParam.timeType">
            <Radio :label="0">起始站</Radio>
            <Radio :label="1">达终点</Radio>
          </RadioGroup>
          <DatePicker v-model="queryForm.timeVal" type="daterange" :options="queryForm.timeOptions" split-panels
            placeholder="请选择时间段" format="yyyy年MM月dd日" style="width: 230px">
          </DatePicker>
        </FormItem>
        <Button type="primary" @click="inspectionSearch" icon="ios-search">搜索</Button>
      </Form>
    </Row>
    <Row>
      <i-col span="24">
        <baseInspection ref="baseInspection" :orderStatues="orderStatues" :inspectionColumn="inspectionColumn"
          sortName="orderNo" :tabParam="tabParam"></baseInspection>
      </i-col>
    </Row>
    <xlinkModal v-model="operatModal.viewDetailShow" title="查看详情" width="1000">
      <viewDetail v-if="operatModal.viewDetailShow" :currentMainOrder="mainOrderCurrentRow"></viewDetail>
    </xlinkModal>
    <xlinkModal v-model="operatModal.viewDetailForFleetShow" title="查看详情(车队)" width="1000">
      <viewDetailForFleet v-if="operatModal.viewDetailForFleetShow"
        :currentMainOrder="mainOrderCurrentRow"></viewDetailForFleet>
    </xlinkModal>
    <xlinkModal v-model="operatModal.sendNoticeShow" title="发送通知" width="768">
      <sendNotice v-if="operatModal.sendNoticeShow" :currentMainOrder="mainOrderCurrentRow"
        @close="operatModal.sendNoticeShow = false"></sendNotice>
    </xlinkModal>
    <xlinkModal v-model="operatModal.assignmentOrderShow" title="派单" width="768">
      <assignmentOrder v-if="operatModal.assignmentOrderShow" :currentMainOrder="mainOrderCurrentRow"
        @close="operatModal.assignmentOrderShow = false"></assignmentOrder>
    </xlinkModal>
    <xlinkModal v-model="operatModal.dispatchDriverShow" title="派遣司机" width="768">
      <dispatchDriver v-if="operatModal.dispatchDriverShow" :currentMainOrder="mainOrderCurrentRow"
        @close="operatModal.dispatchDriverShow = false"></dispatchDriver>
    </xlinkModal>
    <xlinkModal v-model="operatModal.dispatchDriverXHSShow" title="派遣司机" width="460">
      <dispatchXHSDriver v-if="operatModal.dispatchDriverXHSShow" :currentMainOrder="mainOrderCurrentRow"
        @close="operatModal.dispatchDriverXHSShow = false"></dispatchXHSDriver>
    </xlinkModal>
  </div>
</template>

<script>
  import baseInspection from './components/baseInspection'
  import xlinkModal from '@components/modal/xlinkModal'
  import viewDetail from './components/viewDetail'
  import viewDetailForFleet from './components/viewDetailForFleet'
  import sendNotice from './components/sendNotice'
  import assignmentOrder from './components/assignmentOrder'
  import dispatchDriver from './components/dispatchDriver'
  import dispatchXHSDriver from './components/dispatchXHSDriver'
  import moment from 'moment'
  import stationListData from '@components/common/stationList'
  import _ from 'lodash'

  let timeTypes = {
    startTime: 0,
    endTime: 1
  }

  export default {
    name: 'logistics-inspection',
    data () {
      let inspectionColumn = [
        {
          title: '联运单号',
          key: 'orderNo',
          width: 200,
          fixed: 'left'
        },
        {
          title: '起始站',
          key: 'startStationName',
          width: 100
        },
        {
          title: '终点站',
          key: 'endStationName',
          width: 100
        },
        {
          title: '起始站出发时间',
          width: 150,
          key: 'startStationTime',
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.startStationTime
            return (<span>{thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''}</span>)
          }
        },
        {
          title: '到达终点站时间',
          width: 150,
          key: 'endStationTime',
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.endStationTime
            return (<span>{thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''}</span>)
          }
        },
        {
          title: '托运人',
          ellipsis: 'false',
          key: 'shipper',
          width: 250
        },
        {
          title: '收货人',
          ellipsis: 'false',
          key: 'receiver',
          width: 250
        },
        // {
        //   title: '创建时间',
        //   key: 'createTime',
        //   width: 150,
        //   sortable: true,
        //   sortType: 'desc',
        //   render: (h, params) => {
        //     let thisdata = params.row.createTime
        //     return thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
        //   }
        // },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 250,
          render: (h, params) => {
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            let viewDetailForFleetBtn = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.viewDetailForFleetAction(params.row)}>查看详情(车队)</i-button>)
            let assignmentOrderBtn = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.assignmentOrderAction(params.row)}>派单</i-button>)
            let sendNoticeBtn = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.sendNoticeAction(params.row)}>发送通知</i-button>)
            let dispatchDriverBtn = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.dispatchDriverAction(params.row)}>派遣司机</i-button>)
            let dispatchDriverXHSBtn = (<i-button type="primary" size="small" style="margin-right: 5px;"
              onClick={() => this.dispatchDriverXHSAction(params.row)}>派单</i-button>)
            let btnArray = []
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
            powerUtil.contains('assignmentOrder') && btnArray.push(assignmentOrderBtn)
            powerUtil.contains('sendNotice') && btnArray.push(sendNoticeBtn)
            powerUtil.contains('viewDetailForFleet') && btnArray.push(viewDetailForFleetBtn)
            powerUtil.contains('dispatchDriver') && btnArray.push(dispatchDriverBtn)
            powerUtil.contains('xhsFleetPower') && btnArray.push(dispatchDriverXHSBtn)
            return (btnArray)
          }
        }
      ]
      // 1：入线预报，2：出线预报，3：待发运，4：运输中，5：派送中，6：已完成
      let orderStatues = [
        { label: '入线预报', val: '1' },
        { label: '出线预报', val: '2' },
        { label: '待发运', val: '3' },
        { label: '运输中', val: '4' },
        { label: '派送中', val: '5' },
        { label: '已完成', val: '6' }
      ]
      let startStationloading = false
      let endStationloading = false
      let queryForm = {
        startStationloading: false,
        startStationList: [],
        endStationloading: false,
        endStationList: [],
        timeOptions: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        timeVal: ''
      }
      let operatModal = {
        viewDetailShow: false,
        sendNoticeShow: false,
        assignmentOrderShow: false,
        dispatchDriverShow: false,
        viewDetailForFleetShow: false,
        dispatchDriverXHSShow: false
      }
      let mainOrderCurrentRow = {}
      let tabParam = {
        startStationCode: '',
        endStationCode: '',
        status: orderStatues[0].val,
        timeType: timeTypes.startTime,
        isContainer: 1
      }
      let datas = {
        inspectionColumn,
        tabParam,
        orderStatues,
        stationListData,
        startStationloading,
        endStationloading,
        queryForm,
        operatModal,
        mainOrderCurrentRow
      }
      return datas
    },
    computed: {},
    watch: {
      'queryForm.timeVal': function (val, oldval) {
        if (val && val[0] && val[1]) {
          this.tabParam.startTime = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endTime = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59'
        } else {
          delete this.tabParam.startTime
          delete this.tabParam.endTime
        }
      }
    },
    methods: {
      /**
       * TODO(始发站数据搜索)
       * @auther zhangQ
       * @date 2018/3/16 10:31
       **/
      loadStartStationListData (txt) {
        if (txt) {
          this.queryForm.startStationloading = true
          setTimeout(() => {
            this.queryForm.startStationloading = false
            let upTxt = txt.toUpperCase()
            let lowTxt = txt.toLowerCase()
            let resSource = _.filter(stationListData, function (sourceItem) {
              return (_.includes(sourceItem['stationCode'], upTxt) || _.includes(sourceItem['stationCode'], lowTxt) ||
                _.includes(sourceItem['stationName'], upTxt) || _.includes(sourceItem['stationName'], lowTxt) ||
                _.includes(sourceItem['stationNamePy'], upTxt) || _.includes(sourceItem['stationNamePy'], lowTxt))
            })
            this.queryForm.startStationList = resSource
          }, 200)
        } else {
          this.queryForm.startStationList = []
        }
      },
      /**
       * TODO(终点站数据搜索)
       * @auther zhangQ
       * @date 2018/3/16 10:31
       **/
      loadEndStationListData (txt) {
        if (txt) {
          this.queryForm.endStationloading = true
          setTimeout(() => {
            this.queryForm.endStationloading = false
            let upTxt = txt.toUpperCase()
            let lowTxt = txt.toLowerCase()
            let resSource = _.filter(stationListData, function (sourceItem) {
              return (_.includes(sourceItem['stationCode'], upTxt) || _.includes(sourceItem['stationCode'], lowTxt) ||
                _.includes(sourceItem['stationName'], upTxt) || _.includes(sourceItem['stationName'], lowTxt) ||
                _.includes(sourceItem['stationNamePy'], upTxt) || _.includes(sourceItem['stationNamePy'], lowTxt))
            })
            this.queryForm.endStationList = resSource
          }, 200)
        } else {
          this.queryForm.endStationList = []
        }
      },
      timeChange () {
      },
      /**
       * TODO(查看详情)
       * @auther zhangQ
       * @date 2018/3/16 11:06
       **/
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      },
      viewDetailForFleetAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailForFleetShow = true
      },
      sendNoticeAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.sendNoticeShow = true
      },
      assignmentOrderAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.assignmentOrderShow = true
      },
      dispatchDriverAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.dispatchDriverShow = true
      },
      dispatchDriverXHSAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.dispatchDriverXHSShow = true
      },
      /**
       * TODO(搜索)
       * @auther zhangQ
       * @date 2018/3/22 11:53
       */
      inspectionSearch () {
        this.$refs['baseInspection'].dataRefresh()
      }
    },
    mounted () {
    },
    components: {
      baseInspection,
      viewDetail,
      viewDetailForFleet,
      sendNotice,
      xlinkModal,
      assignmentOrder,
      dispatchDriver,
      dispatchXHSDriver
    }
  }
</script>

<style scoped>

</style>
